<template>
  <el-drawer v-model="dialogVisible" title="聊天记录" direction="rtl" size="50%">
    <!-- 消息列表 -->
    <ChatList :chatHistoryList="chatHistoryList" />

    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </el-drawer>
</template>
<script setup lang="ts">
import * as MemMessageApi from '@/api/blind/memMessage'
import ChatList from '../memberMessage/components/ChatList.vue'

const dialogVisible = ref(false) // 弹窗的是否展示
const chatHistoryList = ref([] as MemMessageApi.MemMessageVO[])

const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  recordId: '',
  sendMemId: null,
  reciveMemId: null,
  messageType: null,
  messageContent: null,
  messageStatus: null,
  createTime: null
})

/** 查询列表 */
const getList = async () => {
  const data = await MemMessageApi.getMemMessagePage(queryParams)
  chatHistoryList.value = data.list
  total.value = data.total
}

/** 打开弹窗 */
const open = async (id: string) => {
  dialogVisible.value = true
  // 修改时，设置数据
  if (id) {
    queryParams.recordId = id
    getList()
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹
</script>
<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
